<template>
  <div class="table-list-container">
    <!-- 搜索区域 -->
    <a-form
      v-if="searchItems && searchItems.length > 0"
      ref="searchFormRef"
      :model="searchFormState"
      layout="inline"
    >
      <template v-for="item in searchItems" :key="item.name">
        <a-form-item
          :name="item.name"
          :label="item.label"
        >
          <!-- 动态生成表单项 -->
          <component
            :is="components[item.component]"
            v-bind="item.props"
            v-model:value="searchFormState[item.name]"
          />
        </a-form-item>
      </template>
      
      <a-form-item>
        <a-button type="primary" @click="handleSearch">查询</a-button>
        <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>
    
    <!-- 操作区域 -->
    <div class="action-bar">
      <template v-if="actions && actions.length">
        <a-button 
          v-for="(action, index) in actions" 
          :key="index"
          v-bind="action.props"
          @click="handleAction(action)"
          v-permission="action.permission"
        >
          <template v-if="action.icon">
            <component :is="action.icon" />
          </template>
          {{ action.label }}
        </a-button>
      </template>
    </div>
    
    <!-- 表格内容 -->
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-key="rowKey"
      :pagination="pagination"
      :loading="loading"
      :row-selection="showRowSelection ? rowSelection : undefined"
      @change="onTableChange"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <slot name="bodyCell" :column="column" :record="record"></slot>
      </template>
    </a-table>
    <!-- 其他内容插槽 -->
    <slot name="extraContent"></slot>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { Input,Select } from 'ant-design-vue';

const components = {
  'a-input': Input,
  'a-select':Select
}
const props = defineProps({
  // 表格相关
  columns: {
    type: Array,
    required: true
  },
  dataSource: {
    type: Array,
    default: () => []
  },
  rowKey: {
    type: [String, Function],
    default: 'id'
  },
  loading: {
    type: Boolean,
    default: false
  },
  // 分页相关
  pagination: {
    type: [Object, Boolean],
    default: false
  },
  // 搜索表单项配置
  searchItems: {
    type: Array,
    default: () => []
  },
  // 是否显示行选择
  showRowSelection: {
    type: Boolean,
    default: false
  },
  // 操作按钮配置
  actions: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['tableChange', 'search', 'reset', 'batchDelete', 'action']);

// 搜索表单状态
const searchFormState = reactive({});
const searchFormRef = ref(null);

// 选择行相关状态
const selectedRowKeys = ref([]);

// 行选择配置
const rowSelection = computed(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: keys => selectedRowKeys.value = keys,
  fixed: true
}));

// 表格变化事件处理
const onTableChange = (pagination, filters, sorter) => {
  emit('tableChange', { pagination, filters, sorter });
};


// 搜索处理
const handleSearch = () => {
  emit('search', searchFormState);
};

// 重置表单
const handleReset = () => {
  searchFormRef.value?.resetFields();
  emit('reset');
};

// 批量删除处理
const handleBatchDelete = () => {
  emit('batchDelete', selectedRowKeys.value);
};

// 处理操作按钮点击
const handleAction = (action) => {
  if (action.handler) {
    action.handler(selectedRowKeys.value);
  } else {
    emit('action', action, selectedRowKeys.value);
  }
};

// 暴露方法
defineExpose({
  searchFormState,
  selectedRowKeys,
  resetSearchForm: handleReset,
  clearSelection: () => { selectedRowKeys.value = [] }
});
</script>

<style scoped>
.table-list-container {
  width: 100%;
}

.action-bar {
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 24px;
  text-align: right;
}
</style> 